<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EDRS</title>
		<link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
		<link rel="stylesheet" href="./css/EDAS.css" type="text/css" />
		<link rel="stylesheet" href="./css/RDS.css" type="text/css" />

		<link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css" />
		<style type="text/css">
			.fakeloader {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;
				z-index: 999;
				background-image: url(../bgAll/img/bg.png);
			}
			
			.toCenter {
				top: 0;
			}
			
			.col75 {
				width: 80%;
			}
			
			html,
			body {
				overflow: hidden;
			}
			
			.middleBegin {
				background-color: rgba(112, 146, 190, 0.4);
				width: 450px;
				height: 450px;
				transform: rotateX(60deg) rotateZ(45deg);
				-webkit-transform: rotateX(60deg) rotateZ(45deg);
				-moz-transform: rotateX(60deg) rotateZ(45deg);
			}
			
			.middleDone {
				width: 1000px;
				height: 1000px;
				transform: rotateX(0deg) rotateZ(0deg);
				-webkit-transform: rotateX(0deg) rotateZ(0deg);
				-moz-transform: rotateX(0deg) rotateZ(0deg);
			}

			.cacheFloor {
				top: 138px;
			}
			section {
				width: 650px;
			}

			.edasLineDiv {
				width: 100%;
				height: 100%;
				text-align: center;
			}
			.edasLineDivMiddle:hover{
				width: 120%;
				height: 120%;
			}
			.edasLineDiv .edasLineImg {
				width: 100%;
				height: 100%;
			}

			.edasLineDiv > div {
				margin: 20px 35px;
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}

			.edasLineDiv div img {
				height: 120px;
			}

			.edas-line-iv-middle {
				cursor: pointer;
				position: relative;
			}

			.edas-line-iv-middle > img {
				position: absolute;
				width: 650px;
				left: 0;
				top: 0;
			}

			.edas-line-iv-middle > div {
				position: relative;
				margin: 0;
				width: 150px;
			}

			.edas-line-iv-middle div img {
				height: 160px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
			.iconborder{
				height: 110px;
				width: 110px;
				position: relative;
				margin-bottom: 10px;
			}
			.iconborder .iconRando{
				background: url(img/navIcon.png) no-repeat;
				background-position: -3px -3px;
				height: 110px;
				width: 110px;
			}
			.iconborder .iconRando-heart{
				position: absolute;
				left:0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				height: 70px;
				width: 70px;
				margin-top: 17px;
				cursor: default!important;
			}

		</style>

	</head>

	<body class="wrap">

		<div class="fakeloader"></div>

		<div class="mod-star-list">
			<div class="inner"></div>
		</div>
		<!-- header Start -->
		<div id="header" class="mt12 clearfix" style="margin-left:10px">
			<div class="header-left">
				<a href="../MQ/index.html" class="clearfix">
					<div class="bg-next rotate5 btn"></div>
					<p>浏览下一个产品</p>
				</a>
			</div>
			<div class="header-right">
				<div class="header-open">企业级分布式应用服务<span style="color:#90b8f1;font-size:14px">EDAS</span>
					<p>
						Enterprise Distributed App Service</p>
				</div>
			</div>
		</div>
		<!-- header End -->
		<div class="content" style="height: 100%;width: 100%;">
			<!-- 正文开始  -->
			<div class="col75 toCenter" style="height: 100%;padding: 50px 0px;">
				<div style="margin: 0 35%;width: 650px;position:relative;top: 20px;">
					<canvas id="db0" style="left: calc(50% - 30px);top: 107px;"></canvas>
					<canvas id="db1" style="left: calc(50% - 25px);top: 117px;"></canvas>
					<canvas id="db3" style="left: 115px;top: 107px;"></canvas>
					<canvas id="db4" style="left: 120px;top: 117px;"></canvas>
				</div>
				<section>
					<div class="edasLineDiv">
						<div>
							<div class="iconborder">
								<div class="iconRando rotate5"></div>
								<img class="iconRando-heart" src="img/heart_1.png" />
							</div>
							<span>负载均衡</span>
						</div>
						<div>
							<div class="iconborder">
								<div class="iconRando rotate5"></div>
								<img class="iconRando-heart" src="img/heart_1.png" />
							</div>
							<span>云安全</span>
						</div>
						<div>
							<div class="iconborder">
								<div class="iconRando rotate5"></div>
								<img class="iconRando-heart" src="img/heart_1.png" />
							</div>
							<span>CDN</span>
						</div>
					</div>
				</section>
				<section id="mainSection" style="width:800px;height:350px;margin-left: calc(35% - 75px);margin-top: -40px;">
					<div style="text-align: center;position: relative;top: 75px;"><h1>企业级分布式应用服务</h1></div>
					<div class="edasLineDiv edas-line-iv-middle">
						<img class="edasLineImg shineAction" src="img/zhongjiankuang.png" />
						<div>
							<img src="img/gaoxingneng.png" />
						</div>
						<div>
							<img src="img/shujuhua.png" />
						</div>
						<div>
							<img src="img/zhongjianjian.png" />
						</div>
						<div>
							<img src="img/fuwuzhili.png" />
						</div>
					</div>
				</section>
				<section>
					<div class="edasLineDiv">
						<div>
							<div class="iconborder">
								<div class="iconRando rotate5"></div>
								<img class="iconRando-heart" src="img/heart_1.png" />
							</div>
							<span>云服务器</span>
						</div>
						<div>
							<div class="iconborder">
								<div class="iconRando rotate5"></div>
								<img class="iconRando-heart" src="img/heart_1.png" />
							</div>
							<span>云数据库</span>
						</div>
						<div>
							<div class="iconborder">
								<div class="iconRando rotate5"></div>
								<img class="iconRando-heart" src="img/heart_1.png" />
							</div>
							<span>云存储</span>
						</div>
					</div>
				</section>
				<div style="margin: 0 35%;width: 650px;position:relative;left: 0;top:-84px;">
					<canvas id="app0" style="left: calc(50% - 49px);top: 25px;"></canvas>
					<canvas id="app1" style="left: calc(50% - 4px);"></canvas>
					<canvas id="app3" style="left: 97px;top: 25px;"></canvas>
					<canvas id="app4" style="left: 142px;"></canvas>
					</aside>
				</div>

			</div>
			<!-- 正文结束  -->

		</div>
		<footer class="clearfix">
			<div class="footer-left fl">
				<a href="../index.html?goods=goods1" class="back shineAction"></a>
				<div class="backText">返回主菜单</div>
			</div>
			<div class="footer-right fr">
				<a href="" class="refresh shineAction"></a>
				<div class="refreshText">刷新&nbsp;</div>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src='../bgAll/js/jquery-1.11.1.min.js'></script>
	<script src="../bgAll/js/fakeLoader.min.js"></script>
	<script type="text/javascript" src='./js/common.js'></script>

	<script type="text/javascript" src='../bgAll/js/waypoints.js'></script>
	<script type="text/javascript" src='../bgAll/js/star.js'></script>
	<script type="text/javascript" src='js/index.js'></script>
	<script type="text/javascript" src='js/EDAS.js'></script>
	<script type="text/javascript" src='js/echarts.min-all.js'></script>
	<script type="text/javascript" src="js/china.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#mainSection').on('click',function(){
				window.location.href = 'EDASbox.html'
			});
		});
	</script>

</html>